<template>
    <nav>
        <div class="banxin tanxin nav_in">
            <img src="../assets/images/indexLogo.png" alt="">
        <ul class="tanxin">
            <li class="active">首页</li>
            <li>全部商品</li>
            <li>个人中心</li>
            <li>我的订单</li>
            <li>专属福利</li>
        </ul>
        <div class="search tanxin">
            <input type="text" placeholder="搜索全部商品直接回车">
        <div class="btn">
            <img src="../assets/images/search.png" alt="">
        </div>
        </div>
        </div>
    </nav>
</template>

<script>
export default {
    data () {
        return {

 
        }
    }
}
</script>
 
<style lang = "less" scoped>
    @import "../assets/base.less";
    nav{
        background: #fff;
        .nav_in{
            align-items: center;
            height: 100px;
             ul{
            width: 500px;
            li{
                font-size: 16px;
                color: @black;
                cursor: pointer;
            
            &.active{
                color: @blue;
                font-weight: bold;
              }
            }
        }
            .search{
                width: 264px;
                height: 40px;
                border-radius: 40px;
                overflow: hidden;
                input{
                    width: 214px;
                    height: 40px;
                    border: 2px solid #dedede;
                    border-radius: 20px 0px 0px 20px;
                    box-sizing: border-box;
                    border-right: 0;
                    text-indent: 1em;
                }
                .btn{
                    width: 50px;
                    height: 40px;
                    background: @blue;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    cursor: pointer;
                }
             }
       
       }
    }
    
</style>